<template>
  <div>
    <a-modal title="添加事件" :visible="visible" @ok="handleOk" @cancel="handleCancel" ok-text="确认" cancel-text="取消">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-form-item label="事件标题" required>
          <a-input v-model="form.title" placeholder="input a title"></a-input>
        </a-form-item>
        <a-form-item label="事件描述" required>
          <a-textarea v-model="form.description" placeholder="description"></a-textarea>
        </a-form-item>
        <a-form-item label="事件开始日期" required>
          <a-date-picker v-model="form.startDay" valueFormat="YYYY-MM-DD" />
          <a-time-picker v-model="form.startTime" valueFormat="HH:mm:ss" style="margin-left: 15px" />
        </a-form-item>
        <a-form-item label="事件结束日期" required>
          <a-date-picker v-model="form.endDay" valueFormat="YYYY-MM-DD" />
          <a-time-picker v-model="form.endTime" valueFormat="HH:mm:ss" style="margin-left: 15px" />
        </a-form-item>
        <a-form-item label="优先级" required>
          <a-select show-search placeholder="选择优先级" option-filter-prop="children" style="width: 200px" :filter-option="filterOption" v-model="form.taskLevel">
            <a-select-option value="0">
              一级
            </a-select-option>
            <a-select-option value="1">
              二级
            </a-select-option>
            <a-select-option value="2">
              三级
            </a-select-option>
          </a-select>
        </a-form-item>
        <!--         <a-form-item label="事件文本颜色">
          <colorPicker v-model="form.textColor" class="color" />
        </a-form-item> -->
      </a-form>
    </a-modal>

  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        id: '',
        title: '',
        description: '',
        startDay: '',
        startTime: '',
        endDay: '',
        endTime: '',
        textColor: '#000',
        backgroundColor: '#3788d8',
        borderColor: '#3788d8'
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'visible',
    event: 'cancel'
  },
  methods: {
    handleCancel () {
      this.$emit('cancel', !this.visible)
    },
    handleOk () {
      const form = this.form
      this.$emit('add', form)
      this.form = {}
      this.$emit('cancel', !this.visible)
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
